<script setup lang="ts">
const books = [
  {
    bname: "红楼梦",
    price: "21.00",
    imgSrc: "http://127.0.0.1:8080/src/views/@Admin/DangDang/img/s001.jpg",
  },
  {
    bname: "水浒传",
    price: "22.00",
    imgSrc: "http://127.0.0.1:8080/src/views/@Admin/DangDang/img/s002.jpg",
  },
  {
    bname: "三国演义",
    price: "23.00",
    imgSrc: "http://127.0.0.1:8080/src/views/@Admin/DangDang/img/s003.jpg",
  },
  {
    bname: "西游记",
    price: "24.00",
    imgSrc: "http://127.0.0.1:8080/src/views/@Admin/DangDang/img/s004.jpg",
  },
];
</script>

<template>
  <div class="clear"></div>
  <div class="content">
    <ul class="bkClassifyList">
      <li class="bkClassify">文学类</li>
      <li class="bkClassify">少儿类</li>
      <li class="bkClassify">教育类</li>
      <li class="bkClassify">人文社科类</li>
      <li class="bkClassify">计算机类</li>
      <li class="bkClassify">励志成功类</li>
      <li class="bkClassify">生活类</li>
      <li class="bkClassify">艺术类</li>
    </ul>
    <div id="carousel">
      <div id="carousel_img">
        <img src="./img/carousel/carousel1.jpg" alt="" />
        <img src="./img/carousel/carousel2.jpg" alt="" />
        <img src="./img/carousel/carousel3.jpg" alt="" />
        <img src="./img/carousel/carousel4.jpg" alt="" />
        <img src="./img/carousel/carousel5.jpg" alt="" />
        <img src="./img/carousel/carousel6.jpg" alt="" />
        <img src="./img/carousel/carousel7.jpg" alt="" />
      </div>
      <div id="carousel_Z"><span id="left"></span> <span id="right"></span></div>
    </div>
    <div class="adv">
      <img src="./img/sadv1.jpg" alt="" />
      <img src="./img/sadv2.jpg" alt="" />
    </div>
    <div class="clear"></div>
    <h3 class="bkTitle">文学类书籍推荐</h3>
    <!--文学类书籍推荐-->
    <div class="bkRecommend">
      <ul class="newBook">
        <template v-for="bk in books">
          <li class="rBorder bBorder">
            <a href="<%=basePath%>jsp/BookDetail.jsp" class="bkImgA">
              <img :src="bk.imgSrc" class="bkImg" />
            </a>
            <div class="bkName">
              <a href="">{{ bk.bname }}</a>
            </div>
            <span class="bkPrice">{{ bk.price }}</span>
          </li>
        </template>
      </ul>
      <ul id="bkTop">
        <li>
          <a href="BookDetail.html">
            <span class="topNum">1</span>
            <span class="bkName">JavaEE开发的颠覆者：Spring Boot实战</span>
          </a>
        </li>
        <li>
          <a href="BookDetail.html">
            <span class="topNum">2</span>
            <span class="bkName">JavaEE开发的颠覆者：Spring Boot实战</span>
          </a>
        </li>
        <li>
          <a href="BookDetail.html">
            <span class="topNum">3</span>
            <span class="bkName">JavaEE开发的颠覆者：Spring Boot实战</span>
          </a>
        </li>
        <li>
          <a href="BookDetail.html">
            <span class="topNum">4</span>
            <span class="bkName">JavaEE开发的颠覆者：Spring Boot实战</span>
          </a>
        </li>
        <li>
          <a href="BookDetail.html">
            <span class="topNum">5</span>
            <span class="bkName">JavaEE开发的颠覆者：Spring Boot实战</span>
          </a>
        </li>
        <li>
          <a href="BookDetail.html">
            <span class="topNum">6</span>
            <span class="bkName">JavaEE开发的颠覆者：Spring Boot实战</span>
          </a>
        </li>
        <li>
          <a href="BookDetail.html">
            <span class="topNum">7</span>
            <span class="bkName">JavaEE开发的颠覆者：Spring Boot实战</span>
          </a>
        </li>
        <li>
          <a href="BookDetail.html">
            <span class="topNum">8</span>
            <span class="bkName">JavaEE开发的颠覆者：Spring Boot实战</span>
          </a>
        </li>
        <li>
          <a href="BookDetail.html">
            <span class="topNum">9</span>
            <span class="bkName">JavaEE开发的颠覆者：Spring Boot实战</span>
          </a>
        </li>
        <li>
          <a href="BookDetail.html">
            <span class="topNum">10</span>
            <span class="bkName">JavaEE开发的颠覆者：Spring Boot实战</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped>
@import "./css/reset.css";
@import "./css/HeaAndFoo.css";
@import "./css/jquery-ui.theme.min.css";
@import "./css/jquery-ui.min.css";
.content_C {
  width: 1200px;
  height: 100%;
  margin: 0px auto;
}

.bkClassifyList {
  float: left;
  width: 202px;
  height: 337px;
  background-color: #fafafa;
}

.bkClassify {
  width: 202px;
  height: 42px;
  margin: 0px 0px;
  line-height: 45px;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
}

.bkClassify:hover {
  background-color: #ff2832;
  color: #fff;
  border-radius: 10px;
}

#carousel {
  float: left;
  width: 750px;
  height: 315px;
  border: 1px solid #ff2832;
  border-radius: 5px;
  margin: 10px 0px 0px 10px;
  position: relative;
  overflow: hidden;
  padding: 10px;
}

#carousel_img {
  width: 750px;
  height: 315px;
  float: left;
}

#carousel_img img {
  width: 730px;
  height: 295px;
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 98;
}

#carousel_Z {
  height: 40px;
  width: 750px;
  z-index: 99;
  position: absolute;
  top: 145px;
}

#carousel #left {
  border-right: 35px solid #ccc;
  float: left;
}

#carousel #left,
#carousel #right {
  border-radius: 10px;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  filter: alpha(opacity = 50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

#carousel #right {
  float: right;
  border-left: 35px solid #ccc;
}

.adv {
  width: 200px;
  height: 335px;
  float: right;
  margin-top: 10px;
}

.bkTitle {
  font-size: 20px;
  margin: 30px 0px 10px 0px;
  color: #666666;
  font-weight: bold;
}

.bkRecommend {
  width: 1198px;
  height: 550px;
  border-top: 1px solid #000 !important;
  border: 1px solid #eee;
}

.newBook {
  float: left;
  width: 935px;
  height: 530px;
  padding: 10px 10px;
  border-right: 1px solid #eee;
}

.newBook li {
  float: left;
  width: 166px;
  height: 246px;
  padding: 10px;
}

.rBorder {
  border-right: 1px solid #ccc;
}

.bBorder {
  border-bottom: 1px solid #ccc;
}

.newBook .bkName {
  width: 170px;
  height: 42px;
  margin: 5px 0px 8px 0px;
}
.bkImg {
  width: 150px;
  height: 150px;
}
.bkPrice {
  font-size: 16px;
  font-weight: bold;
  color: #e4393c;
}

#bkTop {
  width: 236px;
  height: 550px;
  float: right;
}

#bkTop li {
  margin: 10px auto;
}

#bkTop li a {
  display: block;
  width: 230px;
  height: 30px;
  overflow: hidden;
}

#bkTop li a span.topNum {
  display: inline-block;
  width: 30px;
  height: 30px;
  float: left;
  line-height: 30px;
  text-align: center;
}

#bkTop li a span.bkName {
  display: inline-block;
  width: 200px;
  height: 30px;
  text-overflow: ellipsis;
  float: left;
  line-height: 30px;
  white-space: nowrap;
  overflow: hidden;
}
</style>
